<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useAIStore } from '@/store/aiStore'
import ChatInterface from './ChatInterface.vue'

const aiStore = useAIStore()
const {
  isWindowVisible,
  isMinimized,
  windowPosition,
  currentAIModel,
  aiModels,
  toggleWindow,
  minimizeWindow,
  maximizeWindow
} = aiStore

const isDragging = ref(false)
const dragOffset = ref({ x: 0, y: 0 })
const unreadMessages = ref(0)

// 拖拽功能
const startDrag = (e) => {
  isDragging.value = true
  dragOffset.value = {
    x: e.clientX - windowPosition.value.x,
    y: e.clientY - windowPosition.value.y
  }

  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
}

const onDrag = (e) => {
  if (!isDragging.value) return

  const newX = e.clientX - dragOffset.value.x
  const newY = e.clientY - dragOffset.value.y

  // 限制在可视区域内
  const maxX = window.innerWidth - 320 // 浮窗宽度
  const maxY = window.innerHeight - 60 // 浮窗头部高度

  windowPosition.value = {
    x: Math.max(0, Math.min(newX, maxX)),
    y: Math.max(0, Math.min(newY, maxY))
  }
}

const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)

  // 保存位置到 localStorage
  localStorage.setItem('aiWindowPosition', JSON.stringify(windowPosition.value))
}

const handleModelChange = (e) => {
  aiStore.setAIModel(e.target.value)
}

// 初始化位置
onMounted(() => {
  const savedPosition = localStorage.getItem('aiWindowPosition')
  if (savedPosition) {
    windowPosition.value = JSON.parse(savedPosition)
  }

  // 监听窗口大小变化，防止浮窗超出屏幕
  window.addEventListener('resize', handleResize)
})

const handleResize = () => {
  const maxX = window.innerWidth - 320
  const maxY = window.innerHeight - 60

  if (windowPosition.value.x > maxX) {
    windowPosition.value.x = maxX
  }

  if (windowPosition.value.y > maxY) {
    windowPosition.value.y = maxY
  }
}

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <Teleport to="body">
    <div
        v-if="isWindowVisible"
        class="ai-floating-window"
        :class="{ 'minimized': isMinimized }"
        :style="{ left: `${windowPosition.x}px`, top: `${windowPosition.y}px` }"
    >
      <!-- 浮窗头部 - 可拖拽区域 -->
      <div
          class="window-header"
          @mousedown="startDrag"
          v-if="!isMinimized"
      >
        <div class="model-selector">
          <select v-model="currentAIModel" @change="handleModelChange">
            <option
                v-for="model in aiModels"
                :key="model.id"
                :value="model.id"
            >
              {{ model.name }}
            </option>
          </select>
        </div>
        <div class="header-actions">
          <button @click="minimizeWindow" title="最小化">
            <i class="icon-minimize"></i>
          </button>
          <button @click="toggleWindow" title="关闭">
            <i class="icon-close"></i>
          </button>
        </div>
      </div>

      <!-- 最小化状态显示 -->
      <div v-else class="minimized-view" @click="maximizeWindow">
        <span class="ai-icon"></span>
        <span class="notification-badge" v-if="unreadMessages">•</span>
      </div>

      <!-- 对话界面 -->
      <ChatInterface v-if="!isMinimized" />
    </div>

    <!-- 全局触发按钮 -->
    <div
        class="ai-trigger-button"
        @click="toggleWindow"
        v-if="!isWindowVisible"
    >
      <span class="ai-icon"></span>
    </div>
  </Teleport>
</template>

<style scoped>

</style>
